import React from 'react';
import './paymentOrder.less';
import { Link } from 'react-router';
import { Breadcrumb, Row, Col, Input, DatePicker, Select, Button, Table, Modal, Pagination, message, Popconfirm, TreeSelect } from 'antd';
import moment from 'moment';
import $ from 'jquery';
import Config from '../../common/config';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token');
class paymentOrder extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [], // 数据
            title: '', // 标题
            publisher: '', // 发布人
            classification: undefined, // 分类
            pageindex: 1, // 当前页
            pagesize: 10, // 每页显示的条数
            total: 0, // 总数
            options: [],//订单来源

            payOrderId: '',//支付单号
            bizOrderId: '',//订单号
            bizServer: undefined,//订单来源
            memberId: '',//用户ID
            subject: '',//商品名
            payStatus: undefined,//支付状态
            payType: undefined,//支付类型
            startAmount: '',//金额开始
            endAmount: '',//金额结束
            payStartDate: '',//支付时间开始
            payEndDate: '',//支付时间结束


        }
        this.onChangePage = this.onChangePage.bind(this)
        this.InputBizOrder = this.InputBizOrder.bind(this)
        this.InputPayOrder = this.InputPayOrder.bind(this)
        this.changeBizServer = this.changeBizServer.bind(this)
        this.InputMember = this.InputMember.bind(this)
        this.InputDetail = this.InputDetail.bind(this)
        this.changeOrderState = this.changeOrderState.bind(this)
        this.changeOrderTape = this.changeOrderTape.bind(this)
        this.changeStartAmount = this.changeStartAmount.bind(this)
        this.changeEndAmount = this.changeEndAmount.bind(this)
    }

    componentDidMount() {
        const state = this.props.location.state
        if (state) {
            this.setState({
                pageindex: state.pageindex,
                pagesize: state.pagesize,
                payOrderId: state.payOrderId,
                bizOrderId: state.bizOrderId,
                bizServer: state.bizServer,
                memberId: state.memberId,
                subject: state.subject,
                payStatus: state.payStatus,
                payType: state.payStatus,
                startAmount: state.startAmount,
                endAmount: state.endAmount,
                payStartDate: state.payStartDate,
                payEndDate: state.payEndDate
            }, () => {
                this.getData()
                this.Access()
            })
        } else {
            this.getData()
            this.Access()
        }
    }

    // 获取支付订单 
    getData() {
        const { pageindex, pagesize, payOrderId, bizOrderId, bizServer, memberId, subject, payStatus, payType, startAmount, endAmount, payStartDate, payEndDate } = this.state
        $.ajax({
            url: `${config.paymentOrder}/manage/queryOrders`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                pageindex,
                pagesize,
                payOrderId,
                bizOrderId,
                bizServer,
                memberId,
                subject,
                payStatus,
                payType,
                startAmount,
                endAmount,
                payStartDate,
                payEndDate
            },
            success: (res) => {
                console.log('获取支付订单', res)
                if (res.code === 200) {
                    res.data.rows.forEach((item, index) => {
                        item.key = index + 1 + (this.state.pageindex - 1) * this.state.pagesize;
                    })
                    this.setState({
                        total: res.data.count,
                        data: res.data.rows
                    })
                }
            }
        });
    }

    // 获取订单来源
    Access() {
        $.ajax({
            url: `${config.paymentOrder}/manage/getBizServers`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {},
            success: (res) => {
                console.log('获取订单来源', res)
                if (res.code === 200) {
                    this.setState({
                        options: res.data,
                    })
                }
            }
        });
    }

    // 表头
    getColumns() {
        var _this=this;
        return [
            {
                title: '支付单ID',
                width: '9%',
                dataIndex: 'payOrderId'
            },
            {
                title: '订单来源',
                width: '9%',
                dataIndex: 'bizServer',
                render: (record) => {
                    var value='';
                    _this.state.options.forEach(element => {
                        if (record == element.name) {
                            value= element.value;
                        }
                    });
                   return value;
                }
            },
            {
                title: '订单号',
                width: '9%',
                dataIndex: 'bizOrderId',
            },
            {
                title: '支付类型',
                width: '9%',
                dataIndex: 'payTypeName',
            },
            {
                title: '金额(元)',
                width: '9%',
                dataIndex: 'totalAmount',
                render: (record, text) => {
                    return <span style={{ color: '#ff0000' }}>{text.totalAmount}</span>
                }
            },
            {
                title: '商品名',
                width: '9%',
                dataIndex: 'subject'
            },
            {
                title: '商品描述',
                width: '9%',
                dataIndex: 'detail'
            },
            {
                title: '用户ID',
                width: '9%',
                dataIndex: 'memberId'
            },
            {
                title: '创建时间',
                width: '9%',
                dataIndex: 'createdAt',
                render: (text, record) => {
                    if (text) {
                        return moment(text).format('YYYY-MM-DD HH:mm');
                    } else {
                        return ``
                    }

                }
            },
            {
                title: '支付时间',
                width: '9%',
                dataIndex: 'payDate',
                render: (text, record) => {
                    if (text) {
                        return moment(text).format('YYYY-MM-DD HH:mm');
                    } else {
                        return ``
                    }

                }
            },
            {
                title: '支付状态',
                width: '10%',
                dataIndex: 'payStatus',
                render: (record) => {
                    let text = "";
                    switch (record) {
                        case 0:
                            text = '待支付';
                            break;
                        case 1:
                            text = '已支付';
                            break;
                    }
                    return text;
                }
            },
        ];
    }

    // 输入支付单号搜索值
    InputBizOrder(e) {
        console.log(e.target.value)
        this.setState({
            payOrderId: e.target.value
        });
    }

    // 输入订单号搜索值
    InputPayOrder(e) {
        console.log(e.target.value)
        this.setState({
            bizOrderId: e.target.value
        });
    }

    //选择
    changeBizServer(value) {
        console.log(value)
        this.setState({
            bizServer: value
        });
    }

    // 输入用户id搜索值
    InputMember(e) {
        console.log(e.target.value)
        this.setState({
            memberId: e.target.value
        });
    }

    // 输入商品名搜索值
    InputDetail(e) {
        console.log(e.target.value)
        this.setState({
            subject: e.target.value
        });
    }

    //选择支付状态
    changeOrderState(value) {
        console.log(value)
        this.setState({
            payStatus: value
        });
    }

    //选择支付类型
    changeOrderTape(value) {
        console.log(value)
        this.setState({
            payType: value
        });
    }

    // 输入金额开始
    changeStartAmount(e) {
        console.log(e.target.value)
        this.setState({
            startAmount: e.target.value
        });
    }

    // 输入金额结束
    changeEndAmount(e) {
        console.log(e.target.value)
        this.setState({
            endAmount: e.target.value
        });
    }

    //生日禁用
    disabledDate1(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }

    //日期筛选方法
    changeDate(date, dateStr) {
        console.log('feefe', date, dateStr)
        this.setState({
            dateStr,
            date,
        });
        this.setState({
            pageindex: 1,
            payStartDate: dateStr[0],
            payEndDate: dateStr[1]
        });
    }

    // 搜索/清空
    filterOrders(key) {
        if (key) {
            // 搜索
            this.setState({
                pageindex: 1
            }, () => {
                this.getData();
            });
        } else {
            // 清空
            this.setState({
                pageindex: 1,
                payOrderId: '',
                bizOrderId: '',
                bizServer: undefined,
                memberId: '',
                subject: '',
                payStatus: undefined,
                payType: undefined,
                startAmount: '',
                endAmount: '',
                payStartDate: '',
                payEndDate: '',
                date:['','']
            }, () => {
                this.getData();
            });
        }
    }

    // 切换分页
    onChangePage(pageindex) {
        this.setState({
            pageindex
        }, () => {
            this.getData();
        });
    }

    render() {
        const columns = this.getColumns();
        return (
            <div className='contentBox clearfix'>
                <div className="member-content-Search">
                    <div className='breadcrumb'>
                        <Breadcrumb separator=">">
                            <Breadcrumb.Item>支付中心</Breadcrumb.Item>
                            <Breadcrumb.Item>支付订单</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div>
                        <div className="member-content-Search" style={{ marginBottom: 20 }}>
                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='支付单号' placeholder="请输入" value={this.state.payOrderId} onChange={this.InputBizOrder} />
                            </div>
                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='订单号' placeholder="请输入" value={this.state.bizOrderId} onChange={this.InputPayOrder} />
                            </div>
                            <div className='addetd addetd-a addetd-kk'>
                                <InputGroup compact>
                                    <span className='chengge-a'>订单来源</span>
                                    <Select placeholder='全部' value={this.state.bizServer} onChange={this.changeBizServer} allowClear style={{ width: 120, marginLeft: 20 }}>
                                        {
                                            this.state.options.map((item, i) => (
                                                <Option value={`${item.name}`} key={i}>{item.value}</Option>
                                            ))
                                        }
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='用户ID' placeholder="请输入" value={this.state.memberId} onChange={this.InputMember} />
                            </div>
                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='商品名' placeholder="请输入" value={this.state.subject} onChange={this.InputDetail} />
                            </div>
                        </div>
                        <div className="member-content-Search" style={{ marginBottom: 20 }}>
                            <div className='addetd addetd-a addetd-kk'>
                                <InputGroup compact>
                                    <span className='chengge-a'>支付状态</span>
                                    <Select placeholder='全部' value={this.state.payStatus} onChange={this.changeOrderState} allowClear style={{ width: 120, marginLeft: 20 }}>
                                        <Option value='0'>待支付</Option>
                                        <Option value='1'>已支付</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a addetd-kk'>
                                <InputGroup compact>
                                    <span className='chengge-a'>支付类型</span>
                                    <Select placeholder='全部' value={this.state.payType} onChange={this.changeOrderTape} allowClear style={{ width: 120, marginLeft: 20 }}>
                                        <Option value='wx'>微信</Option>
                                        <Option value='ali'>支付宝</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a addetd-kk dsoyy_op'>
                                <InputGroup compact>
                                    <span className='chengge-a cccs_tyt'>金额</span>
                                    <Input size="large" className='xiangsikangsit' value={this.state.startAmount} onChange={this.changeStartAmount} />
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a addetd-kk dsoyy_op1'>
                                <InputGroup compact>
                                    <span className='limiaossi'>~</span>
                                    <Input size="large" className='xiangsikangsit' value={this.state.endAmount} onChange={this.changeEndAmount} />
                                </InputGroup>
                            </div>
                            <div className='addetd addetd1 addetd2'>
                                <Input className='addetd-a-r' addonBefore="支付时间" value={this.state.Inkey} onChange={(e) => this.changeInkey(e)} />
                                <RangePicker
                                    onChange={this.changeDate.bind(this)}
                                    format='YYYY-MM-DD'
                                    value={this.state.date}
                                    disabledDate={(val) => this.disabledDate1(val)}
                                />
                            </div>
                            <Button className='ant-btn-primary' icon='search' onClick={this.filterOrders.bind(this, 1)}>搜索</Button>
                            <Button className='ant-btn-primary' icon='sync' onClick={this.filterOrders.bind(this, 0)}>重置</Button>
                        </div>
                    </div>
                </div>
                <div className='allgoods-table clearfix'>
                    <Table columns={columns} dataSource={this.state.data} pagination={false} bordered />
                </div>
                <div className='goods-label-let clearfix'>
                    <div className="floor-ppagi">
                        {
                            this.state.total == 0 ?
                                <p className="floor-ppagip">
                                    共{this.state.total}条记录
              </p> :
                                <p className="floor-ppagip">
                                    当前显示
                {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                {this.state.pagesize * this.state.pageindex < this.state.total ? this.state.pagesize * this.state.pageindex : this.state.total}条记录，
                共{this.state.total}条记录
              </p>
                        }
                        <Pagination current={this.state.pageindex} total={this.state.total || 1} defaultPageSize={this.state.pagesize} onChange={this.onChangePage.bind(this)} />
                    </div>
                </div>
            </div>
        )
    }
}

export default paymentOrder;
